<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" name="referrer" content="never">
	<title>music app</title>
	<script src="./iconfont.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="shortcut icon" href="http://onfg1fey2.bkt.clouddn.com/%E5%B1%B1%E8%84%89.png" type="image/x-icon" />
	<style type="text/css">
		.icon {
		   width: 1em; height: 1em;
		   vertical-align: -0.15em;
		   fill: currentColor;
		   overflow: hidden;
		}
	</style>
</head>
<body>

	<div id="app">

		<article>
			<div class="header">
				<div class="top-bar">
					<div class="left-bar">
						<a class="logo"><svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shanmai"></use>
						</svg></a>
						<a href="javascript:void(0);"><p>Home</p></a>
						<a href="javascript:void(0);"><p>Collection</p></a>
					</div>
				<div class="center-bar">
					<input type="text" placeholder="Search For artists,bands,tracks,podcasts" name="search" id="search">
				</div>
				<div class="right-bar">
					<a href="javascript:void(0);"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-dang"></use>
					</svg></a>
					<a href="javascript:void(0);"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-youxiang"></use>
					</svg></a>
					<a href="javascript:void(0);"><div class="user"></div><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-icon-xia"></use>
					</svg></a>
					<a href="javascript:void(0);"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-sangedian"></use>
					</svg></a>
				</div>
			</div>
			</div>


			<div class="back info">
				<div class="song">
					<p class="songname">{{ title }}</p>
					<p class="artist">{{ artist }}</p>
					<div class="item">
						<a href="javascript:void(0);"><svg class="icon love" aria-hidden="true"><use xlink:href="#icon-love"></use></svg>Like</a>
						<a href="javascript:void(0);"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xunhuan"></use></svg>Repost</a>
						<a href="javascript:void(0);"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wsmp-contacts"></use></svg>Share</a>
						<a href="javascript:void(0);"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-sangedian"></use></svg>More</a>
					</div>
					<!--<p class="lyric" v-for="lyric in arr">{{ lyric.lrc }}</p>-->
					<!--&lt;!&ndash;<ul class="lyric">&ndash;&gt;-->
						<!--&lt;!&ndash;<div class="cover"></div>&ndash;&gt;-->
						<!--&lt;!&ndash;<li  v-for="lyric in arr">{{ lyric.lrc }}</li>&ndash;&gt;-->
					<!--&lt;!&ndash;</ul>&ndash;&gt;-->
				</div>
			</div>

			<div class="back ctrl">
				<div class="btns">
					<!--<img v-bind:src="pic">-->
					<section class="key" v-on:mouseup="moveOver">
						<a href="javascript:void(0)" class="left" v-on:click="playOther">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-shangyishou"></use>
							</svg>
						</a>
						<a href="javascript:void(0);" class="stop" v-on:click="stopSong" v-if="status">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-zanting"></use>
							</svg>
						</a>
						<a href="javascript:void(0)" class="start" v-on:click="playSong"  v-if="!status">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-bofang"></use>
							</svg>
						</a>
						<a href="javascript:void(0)" class="right" v-on:click="playOther">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-xiayishou"></use>
							</svg>
						</a>
						<a href="javascript:void(0)" v-if="!noVolume" v-on:click="toggleNoVolume">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-yinliang"></use>
							</svg>
						</a>
						<a href="javascript:void(0)" v-if="noVolume" v-on:click="toggleNoVolume">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-ttpodicon"></use>
							</svg>
						</a>
						<!--<div class="volume" v-on:click="setVolume" v-on:mousedown="moveVolume">-->
						<!--<div class="nowvolume"></div>-->
						<!--<div class="volumepoint"></div>-->
						<!--</div>-->
					</section>

					<div class="list"></div>
				</div>
			</div>
			<div class="back ">
				<div class="singer">

					<div class="pic">
						<img v-bind:src="pic">
					</div>
					<div class="detail">
						<div>
							<p class="artist">{{ artist }}<svg class="icon vip" aria-hidden="true"><use xlink:href="#icon-vip"></use></svg></use></p>
						</div>
						<div>
							<a href="javascript:void(0);"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-love"></use></svg>5.71M</a>
							<a href="javascript:void(0);"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-pulse"></use></svg>148</a>
						</div>

					</div>

				</div>
			</div>
			<div class="back footer">
				<section class="process" v-on:mouseup="setOver">
					<div class="progress" v-on:mousedown="setProgress" v-on:click="setWidth">
						<div class="now"></div>
						<div class="point"></div>
					</div>
					<span class="nowlength">{{ nowTime }}</span>
					<span class="songlength">{{ endTime }}</span>
				</section>
			</div>
		</article>
		<audio v-bind:src="url"></audio>
	</div>

	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>